<template>
	<div class="wrapper">
		<!-- 1. 用来帮我们去嵌套主页中的内容 -->
        <!-- 1.1 顶部模块 -->
		<MyHeader class="header"></MyHeader>
        <!-- 1.2 中间模块 -->
		<MyMain class="main"></MyMain>
        <!-- 1-1-1-1分隔空间 -->
		<div style="min-height: 150px"></div>
        <!-- 1.3 底部模块 -->
		<MyFooter class="footer"></MyFooter>
	</div>
</template>

<script>
import MyHeader from '@/components/MyHeader.vue'
import MyMain from '@/components/MyMain.vue'
import MyFooter from '@/components/MyFooter.vue'

export default {
	name: 'App',
	components: {
		MyHeader,
		MyMain,
		MyFooter
	}
}
</script>

<style scoped>
html,
body {
	height: 100%;
}
.wrapper {
	display: flex;
	flex-direction: column;
	height: 100vh;
}
.header {
	flex: 0;
}
.main {
	flex: 1;
}

.footer {
	flex: 0;
}
</style>
